<template>
  <headPage></headPage>
  <div class="main_box information" v-loading="loading">
    <titleBack :title="course_name"></titleBack>
    <div class="content_box" v-for="(item, index) in list" :key="index">
      <div class="table_title">{{ item.xiaokemingcheng }}</div>
      <div class="tab_content" v-if="item.nenglipinggu.length > 0">
        <div class="table_th">
          <div class="th_item th_w_1">课程技能</div>
          <div class="th_item th_w_2">评分</div>
          <div class="th_item th_w_3">备注</div>
        </div>
        <div class="table_td" v-for="(v, k) in item.nenglipinggu" :key="k">
          <div class="td_item th_w_1">{{ v.jinengmingcheng }}</div>
          <div class="td_item th_w_2">
            <el-rate
              :disabled="true"
              v-model="v.pingfen"
              size="small"
              :max="5"
              :clearable="true"
              void-color="#E6E6E6"
            />
          </div>
          <div class="td_item th_w_3">
            <div v-html="v.beizhu"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="no_data" v-if="list.length == 0 && !loading">
      <img class="no_img" src="../../../assets/default/12.png" alt="" />
    </div>
  </div>
  <footerPage></footerPage>
</template>
    
    
<script name="assessDetails" setup>
import { post66279b7e17196 } from "@/utils/api.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import titleBack from "../titleBack.vue";

import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
let router = useRouter();
let route = useRoute();

let aid = ref(route.query.aid); // 课程id
let course_name = ref(route.query.course_name); // 课程id

onMounted(() => {
  getData();
});

let loading = ref(true);
let list = ref([]);
function getData() {
  post66279b7e17196({
    freecourselist_id: aid.value,
  })
    .then((res) => {
      console.log(res);
      loading.value = false;
      if (res.code == 1) {
        list.value = res.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
</script>
    
  <style lang="scss" scoped>
.information {
  margin-top: 110px;
  margin-bottom: 24px;
  padding: 18px 16px;
  background: #fff;
  min-height: 358px;
  .content_box {
    width: 688px;
    padding: 12px;
    .table_title {
      font-size: 9px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .tab_content {
      .table_th {
        background: #f6f7f9;
        border-top: 1px solid #eeeeee;
        border-left: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        display: flex;
        .th_item {
          padding: 8.5px 12px;
          // padding: 0 12px;
          border-right: 1px solid #eeeeee;
          font-size: 7px;
          color: #666;
        }
      }
      .table_td {
        border-left: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        display: flex;
        .td_item {
          padding: 8.5px 12px;
          border-right: 1px solid #eeeeee;
          font-size: 7px;
          display: flex;
          align-items: center;
        }
      }
      .th_w_1 {
        width: 275px;
      }
      .th_w_2 {
        width: 138px;
      }
      .th_w_3 {
        width: 275px;
      }
      .table_td:hover {
        background: #f6f7f9;
      }
    }
  }
}
</style>